<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="mainbox">
    <div id="boxA" style="width: 880px;height:550px;"></div>
</div>
<script src="echarts-all.min.js"></script>
<script src="layui/layui.all.js"></script>
<script>
    // 初始化LayUI模块
    const $ = layui.$;
    const layer = layui.layer;
    //ajax获取数据

    // 基于准备好的dom，初始化ECharts实例（DOM容器为boxA）
    var myChart = echarts.init(document.getElementById('boxA'));

    // 显示加载提示
    var loadIndex = layer.load(1);

    $.ajax({
        url:'order/roseinfos',
        data:{},
        async:false,    // 同步请求（可能影响用户体验）
        success:function (data){
            // 关闭加载提示
            layer.close(loadIndex);
            // 创建商品统计对象
            const goodsMap = {};
            // 遍历数据并聚合统计
            data.forEach(item => {
                // 处理商品名称（兼容空值和前后空格）
                const name = item.goodsname?.trim() || '未知商品';
                const number = item.number || 0;

                // 累加商品数量
                goodsMap[name] = (goodsMap[name] || 0) + number;
            });

            // 生成图表数据
            const chartData = Object.keys(goodsMap).map(name => ({
                name: name,
                value: goodsMap[name]
            }));

            // 指定图表的配置项和数据
            var option = {
                legend: {
                    top: 'bottom'  // 图例位置在底部
                },
                toolbox: {  // 右侧工具栏
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: false, readOnly: true },  // 隐藏数据视图
                        restore: { show: false },  // 隐藏重置按钮
                        saveAsImage: { show: true }  // 显示保存图片按钮
                    }
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',  // 饼图类型
                        radius: [10, 225],  // 内外半径（控制环状效果）
                        center: ['50%', '50%'],  // 居中显示
                        roseType: 'area',  // 南丁格尔玫瑰图模式
                        itemStyle: {
                            borderRadius: 8  // 扇形圆角（不知道啥原因，目前页面不显示圆角，抽空问问老崔）
                        },
                        data: chartData  // 绑定数据源
                    }]
            };

            // 渲染图表
            myChart.setOption(option);

        }
    });

</script>
</body>
</html>